<template>
  <div>
    <div class="fixed-table">
      <PageableTable
        :loading="loading"
        :data="insideTableData"
        :total="totalElements"
        :page="currentPage"
        :page-size="pageSize"
        :table-height="tableHeight"
        size="mini"
        class="fixed-table-table"
        :multiple-selected="false"
        @page-change="onPageChange"
        @sort-change="onSortChange"
      >
        <el-table-column v-for="column in insideColumns" :key="column.key" :label="column.title" :width="column.width" :prop="column.key" :sortable="column.sortable" min-width="117">
          <template slot-scope="scope">
            <column-render :render="column.render" :row="scope.row" :column="column" />
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" min-width="230" class-name="small-padding fixed-width">
          <template slot-scope="{row}">
            <el-button v-if="row.status !=='finished'" title="编辑" type="text" size="mini" icon="el-icon-video-play" @click="edit(row.id)" />
          </template>
        </el-table-column>
      </PageableTable>
    </div>
    <FormDialog class="fixed-dialog-height" title="任务处理" :submit-display="true" confirm-text="保存" :show.sync="dialogFormVisible" width="70%" @on-submit="submit" @on-ok="ok" @on-cancel="cancel">
      <EditForm :id="editId" ref="editForm" />
    </FormDialog>
    <ViewDialog class="fixed-dialog-height" title="查看" :show.sync="dialogViewVisible" width="70%" @on-cancel="viewCancel">
      <ViewForm :id="editId" />
    </ViewDialog>
  </div>
</template>

<script>
import ViewDialog from '@neu/biz-core/components/ViewDialog'
import FormDialog from '@neu/biz-core/components/FormDialog'
import ViewForm from '@neu/dcom-ui/views/hnInspection/inspectionTask/components/viewForm'
import EditForm from '@neu/dcom-ui/views/hnInspection/inspectionTask/components/editForm'
import PageableTable from '@neu/biz-core/components/PageableTable'
import databind from '@neu/biz-core/mixins/databind'
import { formatDate } from '@neu/biz-core/utils/utils'
import { page, remove } from '@neu/dcom-ui/api/hnInspectionTask'
import { on } from '@neu/biz-core/utils/utils'
import { debounce } from '@neu/biz-core/utils'
export default {
  name: 'InspectionItem',
  components: {
    FormDialog,
    EditForm,
    PageableTable,
    ViewDialog,
    ViewForm
    // SelectDialog
  },
  // 加入混入，使表格混入更多的api操作
  mixins: [databind],
  data() {
    return {
      r: page,
      d: remove,
      // 巡检类型
      types: [],
      // 数据类型
      dataTypes: [],
      insideColumns: [
        { title: '任务编号', key: 'code', sortable: 'custom', display: true,
          render: (h, params) => { // 查看功能
            return h('span', [
              h('el-link', {
                class: 'font-12',
                attrs: { title: params.row.code },
                props: { type: 'primary' },
                on: { click: () => { this.view(params.row.id) } }},
              params.row.code)
            ])
          }
        },
        { title: '厅局', key: 'institutionName', sortable: 'custom', display: true },
        { title: '开始时间', key: 'startDateTime', sortable: 'custom', render: (h, params) => { return h('span', formatDate(params.row.startDateTime)) }, display: true },
        { title: '结束时间', key: 'endDateTime', sortable: 'custom', render: (h, params) => { return h('span', formatDate(params.row.endDateTime)) }, display: true },
        { title: '任务状态', key: 'status', sortable: 'custom', display: true, render: (h, params) => {
          if (params.row.status === 'finished') {
            return h('span', [
              h('el-tag', '已完成')
            ])
          } else if (params.row.status === 'notStarted') {
            return h('span', [
              h('el-tag', {
                props: {
                  type: 'info'
                }
              }, '待处理')
            ])
          } else if (params.row.status === 'inspecting') {
            return h('span', [
              h('el-tag', {
                props: {
                  type: 'warning'
                }
              }, '进行中')
            ])
          }
        } },
        { title: '执行人', key: 'userName', sortable: 'custom', display: true },
        { title: '执行时间', key: 'updateTime', sortable: 'custom', render: (h, params) => { return h('span', formatDate(params.row.updateTime)) }, display: true }
      ],
      dialogFormVisible: false,
      dialogViewVisible: false,
      dialogStatus: 'create',
      editId: -1
    }
  },
  created() {
    this.filter({ s_status: 'notStarted,inspecting' })
  },
  methods: {
    // 表格编辑按钮点击事件处理
    edit(id) {
      // 打开对话框
      this.editId = id
      this.dialogFormVisible = true
      // 更新当前被编辑实体的ID，自动传递至编辑表单
    },
    // 编辑资产对话框确认事件处理
    ok() {
      // 直接调用表单实例的保存方法
      this.$refs.editForm.save().then(response => {
        if (response === false) return
        this.$message({
          showClose: true,
          message: '操作成功！',
          type: 'success'
        })
        // 调用pageable-table实例的mixin方法refresh()，更新表格
        this.refresh()
        // 关闭对话框
        this.dialogFormVisible = false
        this.$refs.editForm.loading.close()
      })
    },
    cancel() {
      this.editId = -1
      this.$refs.editForm.reset()
      // 关闭对话框
      this.dialogFormVisible = false
    },
    submit() {
      // 直接调用表单实例的保存方法
      this.$refs.editForm.submit().then(response => {
        if (response === false) return
        this.$message({
          showClose: true,
          message: '提交成功！',
          type: 'success'
        })
        // 调用pageable-table实例的mixin方法refresh()，更新表格
        this.refresh()
        // 关闭对话框
        this.dialogFormVisible = false
        this.$refs.editForm.loading.close()
      })
    },
    view(id) {
      this.editId = id
      this.dialogViewVisible = true
    },
    viewCancel() {
      this.editId = -1
      // 关闭对话框
      this.dialogViewVisible = false
    },
    // 自适应页面高度
    initListener() {
      this.$_resizeHandler = debounce(() => {
        const _this = this
        const baseInfoSel = document.querySelector('.app-container .schema-edit-container .base-info')
        const baseInfoHeight = baseInfoSel ? baseInfoSel.offsetHeight : 0
        _this.tableHeight = window.innerHeight - 50 - 16 - baseInfoHeight - 300
      }, 300)

      on(window, 'resize', this.$_resizeHandler)
    }
  }
}
</script>
